<template>
	<view class="com-tabs border-bottom-1 y-flex y-row y-align-center"
	:style="{'border-color': borderColor, 'background-color': bgColor}">
		<scroll-view
		scroll-with-animation
		:scroll-into-view="scrollId"
		:show-scrollbar="false"
		class="com-tabs-scroll y-flex-1"
		:scroll-x="true"
		:render-whole="true">
			<view class="tabs" :style="{
				flex: column == 'auto' ? '' : 1
			}">
				<view class="tab y-flex y-align-center y-justify-center"
				:style="{
					// #ifdef APP-NVUE
					flex: column == 'auto' ? '' : 1,
					//#endif
					// #ifndef APP-NVUE
					width: column == 'auto' ? '' : (100 / data.length) + '%',
					// #endif
					'padding-left': column == 'auto' ? '32rpx' : '',
					'padding-right': column == 'auto' ? '32rpx' : ''
				}" v-for="(item, index) in data" :key="index" :id="'com-tab_' + index" @tap="changeTab(index)">
					<view class="tab-box y-flex y-flex-1 y-justify-center" :style="{
						'border-bottom-color': currentSync == index ? selectedColor : 'rgba(0,0,0,0)'
					}">
						<text class="tab-text" :class="'tab-text_' + index"
						:style="{
							color: index == currentSync ? selectedColor : textColor
						}">{{item.label}}</text>
					</view>
				</view>
				<view v-if="$slots.right" class="pl-35 pr-25 opac-0">
					<slot name="right"></slot>
				</view>
			</view>
		</scroll-view>
		<view class="com-tabs-right y-flex y-justify-center pl-35 pr-25" v-if="$slots.right" @touchmove.stop.prevent :style="{'background-image': 'linear-gradient(to right, ' + _hexToRgba(bgColor, 0.6) + ',' + _hexToRgb(bgColor) + ')'}">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	import { pixelunit, hexToRgb, hexToRgba } from '@/assets/js/util.js'
	export default {
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			current: {
				type: Number,
				default: 0
			},
			column: {
				type: [Number, String],
				default: 'auto'
			},
			textColor: {
				type: String,
				default: '#333333'
			},
			selectedColor: {
				type: String,
				default: '#2196F5'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			bgColor: {
				type: String,
				default: '#fff'
			}
		},
		data () {
			return {
				scrollId: '',
				currentSync: 0
			}
		},
		computed: {
			itemColumn () {
				return Math.floor((this.fullWidth - uni.upx2px(60)) / uni.upx2px(150))
			}
		},
		created() {
			this.currentSync = this.current
			this.scrollId = 'com-tab_' + (this.current - 1 >= 0 ? this.current - 1 : 0)
		},
		methods: {
			changeTab (index) {
				this.$nextTick(function () {
					if ( this.currentSync != index ) {
						this.currentSync = index
						this.$nextTick(function () {
							this.scrollId = 'com-tab_' + (index - 1 >= 0 ? index - 1 : 0)
							this.$emit('update:current', index)
							this.$emit('change', {
								current: index,
								detail: this.data[index]
							})
						})
					}
				})
			},
			_pixelunit (size) {
				return pixelunit(size)
			},
			_hexToRgb (hex) {
				return hexToRgb(hex)
			},
			_hexToRgba(hex, opacity) {
				return hexToRgba(hex, opacity)
			}
		},
		watch: {
			current (newVal) {
				if ( newVal != this.currentSync ) {
					if ( this.data.length > 0 ) {
						this.currentSync = newVal
						this.scrollId = 'com-tab_' + (newVal - 1 >= 0 ? newVal - 1 : 0)
					}
				}
			}
		}
	}
</script>

<style scoped>
	/* #ifdef H5 */
	/deep/ .uni-scroll-view {
		scrollbar-width: none;/* Firefox */
		-ms-overflow-style: none;/* IE 10+ */
	}
	/deep/ .uni-scroll-view::-webkit-scrollbar {
	  display: none; /* Chrome Safari */
	}
	/* #endif */
	.com-tabs {
		height: 80rpx;
		position: relative;
	}
	.com-tabs-scroll {
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		overflow: hidden;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		align-items: center;
		/* #endif */
	}
	.com-tabs .tabs {
		position: relative;
		/* #ifdef APP-NVUE */
		flex-direction: row;
		align-items: center;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: block;
		white-space: nowrap;
		/* #endif */
	}
	/* #ifndef APP-NVUE */
	.com-tabs .tab {
		display: inline-flex;
		height: 80rpx;
	}
	/* #endif */
	.com-tabs .tab-box {
		border-top-width: 8rpx;
		border-bottom-width: 8rpx;
		border-top-color: rgba(0, 0, 0, 0);
		border-top-style: solid;
		border-bottom-style: solid;
		height: 80rpx;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}
	.com-tabs .tab .tab-text {
		text-align: center;
		/* #ifndef APP-NVUE */
		transition: color .3s;
		/* #endif */
		font-size: 32rpx;
	}
	.com-tabs-right {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 1px;
	}
</style>
